<template>
  <div class="page-bg page-success">
    <img class="login-logo" src="../../assets/images/logo-ai.png" alt />
    <div class="wrapper">
      <i class="iconfont icon-success"></i>
      <p>恭喜您！注册成功</p>
      <!-- <p class="tip">新注册用户未激活，请联系管理员激活</p> -->
      <Button type="primary" size="large" class="login">
        <router-link :to="routePathData.login">直接登录</router-link>
      </Button>
      <Button size="large" @click="toHome" style="display:none">
        返回首页
        <!-- <router-link :to="routePathData.login">返回首页</router-link> -->
      </Button>
    </div>
  </div>
</template>

<script>
import { routePathData } from 'assets/scripts/common';
import { login, getAccount } from 'http/api/user';

export default {
  data () {
    return {
      routePathData: routePathData,
      password: '',
      account: ''
    };
  },
  methods: {
    toHome () {
      login({
        account: this.account,
        password: this.password
      }).then(res => {
        if (!res) {
          return;
        }
        const { accessToken, authorities } = res;
        if (accessToken) {
          let userInfo = {};
          localStorage.userToken = accessToken;
          userInfo.role = authorities[0];

          // 登录成功之后，获取用户的信息 存到 store 里
          getAccount().then(res => {
            if (!res) {
              return;
            }
            userInfo = Object.assign({}, res, userInfo);
            localStorage.userInfo = JSON.stringify(userInfo);
            this.$router.push({ path: routePathData.home });
          });
        }
      });
    }
  },

  mounted () {
    let { password, account } = this.$route.query;

    this.password = password;
    this.account = account;
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.page-success {
  .login-logo {
    position: absolute;
    left: 60px;
    top: 40px;
    width: 120px;
  }
  .wrapper {
    width: 500px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 40%;
    text-align: center;
    .login {
      background-color: transparent;
      border: 1px solid #269cd3;
      color: #ffffff;
      a {
        color: #fff;
      }
      &:hover {
        background-color: #3b98f2;
      }
    }
    .icon-success {
      color: #269cd3;
      font-size: 50px;
    }
    p {
      font-size: 26px;
      margin: 16px 0;
      color: #ffffff;
      &.tip {
        font-size: 14px;
        color: #bbbbbb;
      }
    }
  }
}
</style>
